﻿
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<style type="text/css">
    table {
        margin: 10px auto auto 10px;
    }
</style>
<ul>
    <li><a href="/Classes/Index">班级</a></li>
    <li><a href="/Students/Index">学生</a></li>
    <li><a href="/Majors/Index">专业</a></li>
    <li><a href="/Courses/Index">课程</a></li>
    <li><a href="/Exams/AllClasses">考试</a></li>
    <li><a href="/Rollcall/AllList">点名</a></li>
    <li><a href="/Classtime/AllClasstime">课表</a></li>
</ul>
<div id="app">
    <table v-show="studentsList.length" class="table-condensed" border="1">
        <thead class="navbar-header">
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>性别</th>
                <th>年龄</th>
                <th>电话</th>
                <th>QQ</th>
                <th>微信</th>
                <th>班级</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(students,index) in studentsList">
                <td><input type="text" v-model="students.Name" /></td>
                <td><input type="text" v-model="students.Number" /></td>
                <td><input type="text" v-model="students.Sex" /></td>
                <td><input type="text" v-model="students.Age" /></td>
                <td><input type="text" v-model="students.Phone" /></td>
                <td><input type="text" v-model="students.Qq" /></td>
                <td><input type="text" v-model="students.Wechat" /></td>
                <td>
                    <select v-model="students.ClassesId">
                        <option v-for="classes in classesList" v-bind:value="classes.Id">{{classes.ClassName}}</option>
                    </select>
                </td>
                @*<td><input type="text" v-model="students.classes" /></td>*@
                <td>
                    <select v-model="students.Status">

                        <option v-for="status in studentstatus" v-bind:value="status.value">
                            {{status.value}}
                        </option>

                    </select>
                </td>
                <td>
                    <div v-if="students.id!=''">
                        <a href="#" v-on:click="updatestudents(students.Id,students.Number,students.Name,students.Sex,students.Age,students.Phone,students.Qq,students.Wechat,students.ClassesId,students.Status)">修改</a>
                        <a href="#" v-on:click="deletestudentsById(students.Id)">删除</a>
                    </div>
                    <div v-else>
                        <a href="#" v-on:click="addstudents(students.Number,students.Name,students.Sex,students.Age,students.Phone,students.Qq,students.Wechat,students.ClassesId,students.Status)">添加</a>
                    </div>
                </td>
            </tr>
        </thead>
    </table>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            studentsList: [],
            classesList: [],
            studentstatus: [{ value: '正常' }, {value:'挂籍'}, {value:'退学'}]

        },
        mounted() {
            this.getAllstudentss(),
                this.getAllclasses();
        },
        methods: {
            getAllstudentss: function () {
                axios.get('@Url.Action("Get", "Students")'
                ).then(
                    (response) => {
                        this.studentsList = [];
                        if (response.data == 0) {
                            alert("权限不足");
                        } else {
                            for (var i = 0; i < response.data.length; i++) {
                                this.studentsList.push(response.data[i]);
                            }
                            this.studentsList.push({ id: "", number: "", name: "", sex: "", age: "", phone: "", qq: "", wechat: "", classesId: "", status: ""});
                        }


                    },
                    (response) => {
                        alert(response.status);
                    }
                ).catch(function (response) {
                    alert(response);
                });
            },
            getAllclasses: function () {
                axios.get('@Url.Action("Get", "Classes")'
                ).then(
                    (response) => {
                        this.classesList = [];

                        for (var i = 0; i < response.data.length; i++) {
                            this.classesList.push(response.data[i]);
                        }
                    },
                    (response) => {
                        alert(response.status);
                    }
                ).catch(function (response) {
                    alert(response);
                });
            },
            addstudents: function (number, name, sex, age, phone, qq, wechat, classesId, status) {

                axios.post('@Url.Action("Add", "Students")', { Number: number, Name: name, Sex: sex, Age: age, Phone: phone, QQ: qq, Wechat: wechat, ClassesId: classesId,Status:status}).then(
                    (response) => {
                        if (response.data == 0) {
                            alert("权限不足");
                        }
                        vm.getAllstudentss();
                        //for (var i = 0; i < response.data.length; i++) {
                        //    this.studentsList.push(response.data[i]);
                        //}
                        //this.studentsList.push({ id: "", number: "", name: "", sex: "", age: "", phone: "", qq: "", wechat: "", classesId: "", status: "" });


                    },
                    (response) => {
                        alert(response.status);
                    }
                ).catch(function (response) {
                    alert(response);
                        });

            },
            updatestudents: function (id,number, name, sex, age, phone, qq, wechat, classesId, status) {
                axios.post('@Url.Action("Edit", "Students")', { Id:id, Number: number, Name: name, Sex: sex, Age: age, Phone: phone, QQ: qq, Wechat: wechat, ClassesId: classesId, Status: status  }).then(
                    (response) => {
                        if (response.data == 0) {
                            alert("权限不足");
                        }
                        vm.getAllstudentss();
                        alert("修改成功");
                    },
                    (response) => {
                        alert(response.status);
                    }
                ).catch(function (response) {
                    alert(response);
                });
            },
            deletestudentsById: function (id) {
                axios.post('@Url.Action("Delete", "Students")', { id: id }).then(
                    (response) => {
                        if (response.data == 0) {
                            alert("权限不足");
                        }
                        vm.getAllstudentss();
                        alert("删除成功");
                    },
                    (response) => {
                        alert(response.status);
                    }
                ).catch(function (response) {
                    alert(response);
                });
            }
        }

    });

</script>